import { readonly, h, markRaw } from "vue";
import { componentTypes as formCompnentsMap } from "./compMapConfig";
import { datePickTypes } from "element-plus";
import BlockContainer from "@/components/Basic/CodeBuilderComps/Materials/BlockContainer.vue";
import FormContainer from "@/components/Basic/CodeBuilderComps/Materials/FormContainer.vue";
// Editor
import LayoutEditor from "@/components/Basic/CodeBuilderComps/EditorConfigs/LayoutEditor.vue";
import ChildrenEditor from "@/components/Basic/CodeBuilderComps/EditorConfigs/ChildrenEditor.vue";

export const componentDefaultConfig = readonly({
  select: () => ({
    value: 1,
    options: [
      { label: "默认选项1", value: 1 },
      { label: "默认选项2", value: 2 },
    ],
  }),
  vSelect: () => ({
    value: 1,
    options: [
      { label: "默认选项1", value: 1 },
      { label: "默认选项2", value: 2 },
    ],
  }),
  radio: () => ({
    value: 1,
    options: [
      { label: "默认选项1", value: 1 },
      { label: "默认选项2", value: 2 },
    ],
  }),
  checkbox: () => ({
    value: [1],
    options: [
      { label: "默认选项1", value: 1 },
      { label: "默认选项2", value: 2 },
    ],
  }),
  treeSelect: () => ({
    value: "1",
    options: [
      {
        value: "1",
        label: "Level one 1",
        children: [
          {
            value: "1-1",
            label: "Level two 1-1",
            children: [
              {
                value: "1-1-1",
                label: "Level three 1-1-1",
              },
            ],
          },
        ],
      },
    ],
  }),
  segmented: () => ({
    value: "默认选项1",
    options: ["默认选项1", "默认选项2"],
  }),
  autocomplete: () => ({
    fetchSuggestions: [],
  }),
  cascader: () => ({
    value: "guide",
    options: [
      {
        value: "guide",
        label: "Guide",
        children: [
          {
            value: "disciplines",
            label: "Disciplines",
            children: [
              {
                value: "consistency",
                label: "Consistency",
              },
              {
                value: "feedback",
                label: "Feedback",
              },
              {
                value: "efficiency",
                label: "Efficiency",
              },
              {
                value: "controllability",
                label: "Controllability",
              },
            ],
          },
          {
            value: "navigation",
            label: "Navigation",
            children: [
              {
                value: "side nav",
                label: "Side Navigation",
              },
              {
                value: "top nav",
                label: "Top Navigation",
              },
            ],
          },
        ],
      },
    ],
  }),
});

const comps = {};

for (const key in formCompnentsMap) {
  if (datePickTypes.includes(key) && key !== "date") {
    continue; // Skip date pick types except 'date'
  }
  const { defaultProps, ...rest } = formCompnentsMap[key];
  comps[key] = () => ({
    ...rest,
  });
}

export const displayNames = {
  form: "表单组件",
  container: "容器组件",
  smallComp: "小组件",
};

/**
 * component
 * displayName
 * icon
 * modelValue?
 */
export const codeBuilderComponentsMap = {
  container: {
    block: () => ({
      component: () => h(BlockContainer),
      displayName: "区块",
      icon: "",
      isBlock: true, // 块级组件 含有子级
      editors: {
        layout: {
          component: markRaw(LayoutEditor),
          value: {},
          displayName: "布局",
        },
        children: {
          component: markRaw(ChildrenEditor),
          displayName: "子元素调整",
        },
      },
    }),
    formContainer: () => ({
      component: () => h(FormContainer), // 内置表单组件
      displayName: "表单容器",
      icon: "",
      isBlock: true,
    }),
  },
  smallComp: {},
  form: comps,
};
